<template>
	<view :class="{bg141414:theme}" style="min-height: 100vh;">
		<view class="posifi zindex5" :style="{paddingTop:shh+'px'}">
			<view @click="back"  class="flex-ju-c mt30 wh70-70 ra100 mt30 ml30 " style="background: rgba(0, 0, 0,0.5);">
				<view  class="" >
					<image mode="widthFix" class="image width32   " src="/static/back.png"></image>
				</view>
			</view>
		</view>
		<image style="border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;" mode="widthFix" class="width1000" src="/static/xaing.png"></image>
		
		<view class="posire mt-420">
			<view class="flex-ju-c">
				<image class="wh465-465 ra20 posiab mt-700" :src="integralinfo.thumb"></image>
			</view>
			<view class="flex-ju-c flex-col  mt20 con size35 ">
				<view class="bold colorfff">浴火而生的莲花</view>
			</view>
			<view class="flex-ju-c mt30">
			<view 
				class="flex-a-i size24 borderccc ra10 hidden mr20 colorfff">
				<view class="ibgtoCAF881-A0E99A color000 pt5 pb5 pl10 pr10">限量</view>
				<view class="pr10 pl10 size28">{{integralinfo.sell_num }}份</view> 
			</view>
			<view
				class="flex-a-i size24 borderccc ra10 hidden ml20 colorfff">
				<view class="ibgtoCAF881-A0E99A color000 pt5 pb5 pl10 pr10">流通</view>
				<view class="pr10 pl10 size28">{{integralinfo.release_num }}份</view>
			</view>
			</view>
		<view class="bgfff " style="border-top-left-radius: 20px;border-top-right-radius: 20px;">
			
		<view class="con pb150 pt50 mt50">
			<!-- <view class="flex-a-i">
				<image src="/static/aaa.png" class="wh83-83 ra83"></image>
				<view class="ml20">
					<view class="size26">创作者的名字</view>
					<view class="color999 size25">500粉丝</view>
				</view>
			</view> -->
			<view :class="theme?'bg292929 colorfff':'bgF5F6F7'" class="borderE1E1E1 size26 ra20 pg30-20 mt30">
				<view class="size30 bold">链上信息</view>
				
				<view class="flex-ju-b mt20">
					<view class="color999">所在产链</view>
					<view :class="theme?'color999':'color333'">{{integralinfo.link_name}}</view>
				</view>
				<view class="flex-ju-b mt20">
					<view class="color999">合约地址</view>
					<view :class="theme?'color999':'color333'" class="">
					{{integralinfo.link_address.substring(0,2)}}****{{integralinfo.link_address.substring(integralinfo.link_address.length-2,999)}}</view>
									
				</view>
				<view class="flex-ju-b mt20">
					<view class="color999">发布时间</view>
					<view :class="theme?'color999':'color333'">{{integralinfo.created_at}}</view>
									
				</view>
				<view class="flex  mt20" style="justify-content: space-between;">
					<view class="color999">支付方式</view>
					<view :class="theme?'color999':'color333'">{{integralinfo.pay_type}}</view>
				</view>
				
			</view>
			
			<view :class="theme?'bg292929 colorfff':'bgF5F6F7'" class="borderE1E1E1 size26 ra20 pg30-20 mt20">
				<view class="size30 bold mb20">商品信息</view>
				<image mode="widthFix" class="image" :src="img"></image>
			</view>
		</view>
		
		<view class="con">
			<view class=" posifi width92vw bottom0 " >
				<view class="ra20  pg10 bgfff "  style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
					<view @click="$refs.tishi.open()"  class="bold height100 bg000 colorfff ra20 flex-ju-c   size29  ">
						兑换{{integralinfo.integral}}积分
					</view>
				</view>
			</view>
		</view>
		</view>
		</view>
	</view>
	
	<uni-popup type="center" border-radius="20px 20px" ref="tishi">
		<view class="pt40 pb40 posire wh500-440 bgfff ra30">
			<view class="flex-ju-c">
				<image mode="widthFix" src="/static/tancc.png" class="width127 posiab top-60"></image>
			</view>
			<view class="flex-ju-c size29  mb5 mt80">
				<view>确认兑换吗？</view>
			</view>
			<view class="flex-ju-c color999 size24 ">
				此操作不可逆
			</view>
			<view class="flex-ju-c flex-col mt80 ">
				<view @click="tabintegral" class="bold srgb bg000 colorfff wh430-100 ra20 flex-ju-c">确认</view>
				<view @click="$refs.tishi.close()" class="bold srgb wh694-100 ra100 flex-ju-c">取消</view>
			</view>
			
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				theme: uni.getStorageSync('theme'),
				integralinfo:{
					link_address:""
				},
				type:1
			}
		},
		onLoad(option) {
			this.img = option.img
			if(option.type==1){
				this.http('exchangeIntegral/'+option.uuid).then(res=>{
					this.integralinfo = res.data
				})
			}else{
				this.http('integralExchange/'+option.uuid).then(res=>{
					this.integralinfo = res.data
				})
			}
		},
		mounted() {
			// this.$refs.tishi.open()
		},
		methods: {
			
			tabintegral(){
				if(this.type==0){
					this.http('integralExchange',{
						uuid:this.integralinfo.uuid
					},'post').then(res=>{
						this.$refs.tishi.close()
						uni.redirectTo({
							url:"suu?integral="+this.integralinfo.integral+'&type=0'
						})
					})
				}else{
					this.http('exchangeIntegral',{
						uuid:this.integralinfo.uuid
					},'post').then(res=>{
						this.$refs.tishi.close()
						uni.redirectTo({
							url:"suu?type=1"
						})
					})
				}
				
			},
		}
	}
</script>

<style>

.qure{
		width: 514rpx;
		height: 104rpx;
		background: linear-gradient(0deg, #FF6E44, #FFA453, #FFDC7F);
		border-radius: 52rpx;
	}
</style>
